<template>
  <el-form ref="sendRuleForm" :model="sendInfo" class="lineHeight32" label-width="110px" label-position="right">
    <el-row type="flex" class="response-el-row">
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="联系人" prop="contacts">
          <el-input
            :value="sendInfo.contacts"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="contacts"
            type="text"
            @input="textInputChange($event, 'contacts')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="地址名称" prop="deliveryAddress">
          <el-input
            :value="sendInfo.deliveryAddress"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="deliveryAddress"
            type="text"
            @input="textInputChange($event, 'deliveryAddress')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="电话" prop="deliveryPhone">
          <el-input
            :value="sendInfo.deliveryPhone"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="deliveryPhone"
            type="text"
            @input="numInputChange($event, 'deliveryPhone')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="省市区" prop="prefixAddress">
          <three-level-area :selected-options="sendInfo.prefixAddress" :disabled="invoiceStatus === 1" @update:options="threeLevelArea" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="详细地址" prop="detailedAddress">
          <el-input
            :value="sendInfo.detailedAddress"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="detailedAddress"
            type="text"
            @input="textInputChange($event, 'detailedAddress')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="邮政编码" prop="postalCode">
          <el-input
            :value="sendInfo.postalCode"
            :disabled="invoiceStatus === 1"
            placeholder=""
            name="postalCode"
            type="text"
            maxlength="6"
            @input="textInputChange($event, 'postalCode')"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import ThreeLevelArea from '@/components/ThreeLevelArea';
export default {
  name: 'SendInfoEdit',
  components: { ThreeLevelArea },
  props: {
    sendInfo: {
      type: Object,
      default: () => {
        return {
          contacts: '',
          deliveryAddress: '',
          deliveryPhone: '',
          prefixAddress: [],
          detailedAddress: '',
          postalCode: ''
        };
      }
    },
    invoiceStatus: {
      type: Number,
      default: 0
    }
  },
  methods: {
    textInputChange(text, prop) {
      const sendInfo = { ...this.sendInfo };
      sendInfo[prop] = text;
      this.$emit('update:sendInfo', sendInfo);
    },
    numInputChange(text, prop) {
      const str = text.replace(/[^\d]/g, ''); // 只允许数字
      const sendInfo = { ...this.sendInfo };
      sendInfo[prop] = str;
      this.$emit('update:sendInfo', sendInfo);
    },
    threeLevelArea(data) {
      const sendInfo = { ...this.sendInfo };
      sendInfo['prefixAddress'] = data;
      this.$emit('update:sendInfo', sendInfo);
    }
  }
};
</script>

